<template>
    <div>
        <el-form
                ref="dataForm"
                status-icon
                :model="form"
                :rules="rules"
                label-width="0px"
        >
            <el-descriptions
                    title="机构信息"
                    :column="3"
                    border
            >
                <el-descriptions-item>
                    <template slot="label"> 机构名称</template>
                    <el-form-item prop="institution_name">
                        <el-input
                                placeholder="请输入机构名称"
                                v-model="form.institution_name"
                                style="width: 100%"
                                clearable
                        ></el-input>
                    </el-form-item>
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label"> 机构类型</template>
                    <el-form-item prop="supervise">
                        <el-select
                                placeholder="请选择机构类型"
                                v-model="form.supervise"
                                style="width: 100%"
                                clearable
                        >
                            <el-option
                                    v-for="item in superviseList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label"> 组织机构代码</template>
                    <el-form-item prop="institution_code">
                        <el-input v-model="form.institution_code" clearable></el-input>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label"> 机构等级</template>
                    <el-form-item prop="institution_level">
                        <el-select
                                placeholder="请选择机构等级"
                                v-model="form.institution_level"
                                style="width: 100%"
                                clearable
                        >
                            <el-option
                                    v-for="item in institutionLevelList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label"> 医院等级</template>
                    <el-form-item prop="hospital_level">
                        <el-select
                                placeholder="请选择医院等级"
                                v-model="form.hospital_level"
                                style="width: 100%"
                                clearable
                        >
                            <el-option
                                    v-for="item in hospitalLevelList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label"> 负责人姓名</template>
                    <el-form-item prop="name">
                        <el-input v-model="form.name" clearable></el-input>
                    </el-form-item>
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label"> 负责人性别</template>
                    <el-form-item prop="sex">
                        <el-select
                                placeholder="请选择负责人性别"
                                v-model="form.sex"
                                style="width: 100%"
                                clearable
                        >
                            <el-option
                                    v-for="item in sexList"
                                    :key="item.name"
                                    :label="item.name"
                                    :value="item.name"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label"> 负责人手机号</template>
                    <el-form-item prop="phone">
                        <el-input v-model="form.phone" clearable></el-input>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label"> 负责人邮箱</template>
                    <el-form-item prop="email">
                        <el-input v-model="form.email" clearable></el-input>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label"> 邮政编码</template>
                    <el-form-item prop="zipcode">
                        <el-input v-model="form.zipcode" clearable></el-input>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label"> 筛查年度</template>
                    <el-form-item prop="years">
                        <el-select
                                placeholder="请选择筛查年度"
                                v-model="form.years"
                                multiple
                                style="width: 100%"
                                clearable
                        >
                            <el-option
                                    v-for="item in taskList"
                                    :key="item.id"
                                    :label="item.year_time"
                                    :value="item.year_time"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">省份</template>
                    <el-form-item prop="province_id">
                        <el-select
                                v-model="form.province_id"
                                placeholder="请选择省份"
                                @change="getCityList()"
                                style="width: 100%"
                                clearable
                        >
                            <el-option
                                    v-for="item in provinceList"
                                    :key="item.id"
                                    :label="item.district"
                                    :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label"> 城市</template>
                    <el-form-item prop="city_id">
                        <el-select
                                placeholder="请选择城市"
                                v-model="form.city_id"
                                @change="getCountyList()"
                                style="width: 100%"
                                clearable
                        >
                            <el-option
                                    v-for="item in cityList"
                                    :key="item.id"
                                    :label="item.district"
                                    :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label"> 区/县</template>
                    <el-form-item prop="district_id">
                        <el-select
                                v-model="form.district_id"
                                placeholder="请选择区/县"
                                style="width: 100%"
                                clearable
                        >
                            <el-option
                                    v-for="item in countyList"
                                    :key="item.id"
                                    :label="item.district"
                                    :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label"> 详细地址</template>
                    <el-form-item prop="address">
                        <el-input v-model="form.address" clearable></el-input>
                    </el-form-item>
                </el-descriptions-item>
            </el-descriptions>

            <el-descriptions :column="1" border>
                <el-descriptions-item labelStyle="width: 13%" contentStyle="width: 87%">
                    <el-form-item label=" ">
                        <el-button @click="handleDialogVisible(false)" size="small"
                        >取 消
                        </el-button
                        >
                        <el-button
                                type="primary"
                                @click="!form.id ? create() : update()"
                                size="small"
                        >确 定
                        </el-button>
                    </el-form-item>
                </el-descriptions-item>
            </el-descriptions>
        </el-form>

    </div>
</template>

<script>
    import {createInstitution, updateInstitution} from "@/api/institution/institution";
    import {allTaskrun} from "@/api/taskrun/taskrun";
    import {listTask} from "@/api/task/task";
    import {listRegion} from "@/api/region/region";

    export default {
        props: ["rowData", "dialogStatus"],
        components: {},
        data() {
            return {
                form: {
                    id: "",
                    province_id: "",
                    city_id: "",
                    district_id: "",
                    supervise: "",
                    years: "",
                    institution_name: "",
                    institution_code: "",
                    hospital_level: "",
                    institution_level: "",
                    name: "",
                    sex: "",
                    phone: "",
                    address: "",
                    zipcode: "",
                    email: "",
                },
                rules: {
                    institution_name: [
                        {
                            required: true,
                            trigger: "blur",
                        },
                    ],
                },
                createLoading: false,
                updateLoading: false,
                provinceList: [],
                cityList: [],
                countyList: [],
                taskList: [],
                superviseList: [
                    {
                        id: "1",
                        name: "筛查机构",
                    },
                    {
                        id: "2",
                        name: "管理机构",
                    },
                ],
                sexList: [
                    {
                        name: "男",
                    },
                    {
                        name: "女",
                    },
                ],
                hospitalLevelList: [
                    {
                        id: 1,
                        name: "三级甲等"
                    },
                    {
                        "id": "2",
                        "name": "三级乙等"
                    },
                    {
                        "id": "3",
                        "name": "三级丙等"
                    },
                    {
                        "id": "4",
                        "name": "二级甲等"
                    },
                    {
                        "id": "5",
                        "name": "二级乙等"
                    },
                    {
                        "id": "6",
                        "name": "二级丙等"
                    },
                    {
                        "id": "7",
                        "name": "一级甲等"
                    },
                    {
                        "id": "8",
                        "name": "一级乙等"
                    },
                    {
                        "id": "9",
                        "name": "一级丙等"
                    }
                ],
                institutionLevelList: [
                    {
                        "id": "697 ",
                        "name": "国家级"
                    },
                    {
                        "id": "698 ",
                        "name": "省级"
                    },
                    {
                        "id": "699",
                        "name": "市级"
                    },
                    {
                        "id": "709",
                        "name": "县区级"
                    },
                    {
                        "id": "710",
                        "name": "乡镇（社区）"
                    },
                    {
                        "id": "711",
                        "name": "村（街道)"
                    }
                ],
            };
        },
        created() {
            this.getProvinceList();
            this.getListTask();
            if (this.dialogStatus == "update") {
                this.form = {...this.rowData};
                this.form.years = this.form.years.split(",");
                this.getCityList();
                this.getCountyList();
            }
        },
        methods: {
            getProvinceList() {
                let param = {
                    pid: 1
                }
                listRegion(param).then((res) => {
                    if (res.code === 200) {
                        this.provinceList = res.data;
                    } else {
                        this.msgError(res.msg);
                    }
                })
            },
            getCityList() {
                let param = {
                    pid: this.form.province_id
                }
                listRegion(param).then((res) => {
                    if (res.code === 200) {
                        this.cityList = res.data;
                    } else {
                        this.msgError(res.msg);
                    }
                })
            },
            getCountyList() {
                let param = {
                    pid: this.form.city_id
                }
                listRegion(param).then((res) => {
                    if (res.code === 200) {
                        this.countyList = res.data;
                    } else {
                        this.msgError(res.msg);
                    }
                })
            },
            getListTask() {
                let param = {
                    pageSize: 100,
                    page: 1,
                }
                listTask(param).then((res) => {
                    if (res.code === 200) {
                        this.taskList = res.data.data;
                    } else {
                        this.msgError(res.msg);
                    }
                })
            },
            //父页面的回调事件
            handleDialogVisible(isUpdate) {
                this.dialogVisible = false;
                this.$emit("childByDialogVisible", this.dialogVisible, isUpdate);
            },
            //创建
            create() {
                this.$refs["dataForm"].validate((valid) => {
                    if (valid) {
                        this.createLoading = true;
                        createInstitution(this.form).then((response) => {
                            this.createLoading = false;
                            if (response.code == 200) {
                                this.msgSuccess(response.msg);
                                this.handleDialogVisible(true);
                            }
                        });
                    }
                });
            },
            //修改
            update() {
                this.$refs["dataForm"].validate((valid) => {
                    if (valid) {
                        this.updateLoading = true;
                        updateInstitution(this.form).then((response) => {
                            this.updateLoading = false;
                            if (response.code == 200) {
                                this.msgSuccess(response.msg);
                                this.handleDialogVisible(true);
                            }
                        });
                    }
                });
            },
        },
        watch: {
            "form.province_id"(newVal, oldVal) {
                if (oldVal !== newVal && oldVal != '') {
                    this.form.city_id = "";
                    this.form.district_id = "";
                }
            },
            "form.city_id"(newVal, oldVal) {
                if (oldVal !== newVal && oldVal != '') {
                    this.form.district_id = "";
                }
            }
        },
    };
</script>
<style lang="scss" scoped="scoped">
    .el-form-item {
        margin: 0px;
    }
</style>
